import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { COLORS } from '../styles/constants';

export default function SectionTitle({
  title,
  style,
  textStyle,
  showMore = false,
  onPressMore,
  count = null,
  onCountPress = null,
}) {
  return (
    <View style={[styles.container, style]}>
      <View style={styles.leftSection}>
        <Text style={[styles.title, textStyle]}>{title}</Text>
        {count !== null && count > 0 && (
          <TouchableOpacity
            onPress={onCountPress}
            activeOpacity={0.85}
            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
          >
            <View style={styles.countBadgeWrapper}>
              <View style={styles.countBadge}>
                <View style={styles.iconContainer}>
                  <Icon name="location" size={14} color={COLORS.primary} />
                </View>
                <Text style={styles.countText}>{count}个景区</Text>
                <Icon
                  name="chevron-forward"
                  size={14}
                  color={COLORS.primary}
                  style={styles.arrowIcon}
                />
              </View>
            </View>
          </TouchableOpacity>
        )}
      </View>
      {showMore && (
        <TouchableOpacity
          onPress={onPressMore}
          style={styles.moreRow}
          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
        >
          <Text style={styles.more}>更多</Text>
          <Icon name="chevron-forward" size={18} color={COLORS.text.tertiary} />
        </TouchableOpacity>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginHorizontal: 16,
    marginTop: 16,
    marginBottom: 12,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  leftSection: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  title: {
    fontSize: 16,
    fontWeight: '700',
    color: COLORS.text.primary,
  },
  countBadgeWrapper: {
    marginLeft: 10,
  },
  countBadge: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  iconContainer: {
    width: 22,
    height: 22,
    borderRadius: 11,
    backgroundColor: COLORS.primaryLight,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 6,
    borderWidth: 1,
    borderColor: COLORS.primarySoft,
  },
  countText: {
    fontSize: 15,
    fontWeight: '700',
    color: COLORS.primary,
    letterSpacing: 0.3,
    marginRight: 4,
  },
  arrowIcon: {
    marginLeft: 2,
  },
  more: {
    fontSize: 14,
    color: COLORS.text.tertiary,
  },
  moreRow: { flexDirection: 'row', alignItems: 'center' },
});
